<template>
  <div>
    <h2>数据图表管理页面</h2>

    <div id="main"></div>
    <div id="main2"></div>
    <div id="main3"></div>
    <div id="main4"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

const initEcharts1 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
      textStyle: {
        color: "#f00",
      },
      left: 50,
    },
    tooltip: {
      show: false,
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
};

const initEcharts2 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart2 = echarts.init(document.getElementById("main2"));
  // 绘制图表
  myChart2.setOption({
    title: {
      text: "酒水菜品对比",
      left: "center",
      top: 30,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 2048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};

const initEcharts3 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart3 = echarts.init(document.getElementById("main3"));
  // 绘制图表
  myChart3.setOption({
    title: {
      text: "统计",
    },
    xAxis: {
      type: "category",
      data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
    },
    legend: {
      data: ["yesterday", "today", "tomorrow"],
      left: "right",
      itemWidth: 50,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "yesterday",
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        smooth: true,
      },
      {
        name: "today",
        data: [241, 122, 312, 254, 278, 214, 256],
        type: "line",
        smooth: true,
      },
      {
        name: "tomorrow",
        data: [413, 234, 143, 235, 314, 421, 157],
        type: "line",
        smooth: true,
      },
    ],
  });
};

onMounted(() => {
  initEcharts1();
  initEcharts2();
  initEcharts3();
});
</script>

<style lang="less" scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
#main,
#main2,
#main3 {
  height: 400px;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 20px;
}

#main4 {
  width: 50%;
  height: 400px;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 20px;
}
</style>
